
.page {
    position: relative;
    overflow: hidden;
    & > .content_l, & > .content_r {
        position: relative;
        float: left;
        width: 50%;
        height: 100%;
    }
}

.page0 {
    background: url("../images/0_bg.png") no-repeat center center;
    background-size: cover;
    //zijia
    margin-left: 0;
    canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }
    header {
        a {
            position: relative;
            display: inline-block;
            overflow: hidden;
            margin: (43px * 0.6) 0 0 (53px * 0.6);
            h1 {
                position: absolute;
                left: -100%;
                visibility: hidden;
            }
            img {
                width: 258px * 0.6;
            }
        }
        span {
            float: right;
            margin: (48px * 0.6) (66px * 0.6) 0 0;
            font-size: 37px * 0.6;
            color: #fff;
            text-align: right;
        }
    }
    .content {
        width: 100%;
        font-size: 0;
        .content_l {
            display: inline-block;
            width: 37%;
            img {
                float: right;
                width: 77%;
            }
        }
        .content_r {
            padding-left: 77px * 0.6;
            display: inline-block;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            vertical-align: top;
            width: 63%;
            h2, p {
                font-size: 60px * 0.6;
                color: #fff;
                text-shadow: 0 2px 5px black;
            }
            h2 {
                margin-top: 110px * 0.6;
            }
            p {
                margin-top: 27px * 0.6;
                margin-bottom: 62px * 0.6;
                font-size: 38px * 0.6;
                letter-spacing: .2em;
            }
            .btn {
                float: left;
                position: relative;
                .code {
                    position: absolute;
                    height: 100%;
                    top: 0;
                    left: 100%;
                    margin-left: 87px * 0.6;
                    //padding-left: 100%;
                    background: url("../images/downloadQR.png") no-repeat ;
                    background-size: contain;
                    border-radius: 8px * 0.6;
                }
            }
            button {
                display: block;
                width: 370px * 0.6;
                padding: 0 (28px * 0.6) 0 (86px * 0.6);
                background: #fd9b00;
                background-repeat: no-repeat;
                background-position: (18px * 0.6) center;
                background-size: 53px * 0.6;
                border: none;
                border-radius: 8px * 0.6;
                line-height: 87px * 0.6;
                color: #fff;
                font-size: 38px * 0.6;
                &:first-of-type {
                    background-image: url("../images/0_btn_i.png");
                }
                &:last-of-type {
                    margin-top: 42px * 0.6;
                    background-image: url("../images/0_btn_a.png");
                }
                &:hover {
                    cursor: pointer;
                }
            }
        }
    }
}

@keyframes round {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.page1 {
    .content_l {
        & > div {
            width: 682px * 0.6;
            height: 256px * 0.6;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
        }
        h2 {
            font-size: 86px * 0.6;
            color: #c81432;
        }
        p {
            margin-top: 60px * 0.6;
            font-size: 37px * 0.6;
            color: #000;
        }
    }
    .content_r {
        .round {
            width: 700px * 0.6;
            height: 700px * 0.6;
            position: relative;
            top: 50%;
            margin-top: -210px;
            left: 8%;
            span {
                animation: round 8s linear infinite;
                position: absolute;
                width: 100%;
                height: 100%;
                top: 50%;
                left: 50%;
                margin-top: -50%;
                margin-left: -50%;
                border: 1px solid #c81432;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                border-radius: 50%;
                text-align: center;
                i {
                    position: relative;
                    top: -10%;
                    display: inline-block;
                    border-radius: 50%;
                    background: #c81432;
                    width: 136px * 0.6;
                    height: 136px * 0.6;
                }
                &:nth-of-type(2) {
                    animation-delay: -2s;
                    animation-duration: 6s;
                    width: 80%;
                    height: 80%;
                    margin-top: -40%;
                    margin-left: -40%;
                    i {
                        width: 136px * 0.4;
                        height: 136px * 0.4;
                    }
                }
                &:nth-of-type(3) {
                    animation-delay: -6s;
                    animation-duration: 10s;
                    width: 60%;
                    height: 60%;
                    margin-top: -30%;
                    margin-left: -30%;
                    i {
                        width: 136px * 0.3;
                        height: 136px * 0.3;
                    }
                }
            }
        }
        .phone {
            position: absolute;
            width: 620px * 0.6;
            bottom: 5%;
            left: 20%;
        }
        .person {
            position: absolute;
            left: 30%;
            bottom: 30%;
            width: 444px * 0.6;
        }
    }
}

.page2 {
    .content_l {
        img {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            width: 660px * 0.6;
            height: 861px * 0.6;
        }
    }
    .content_r {
        & > div {
            text-align: right;

            width: 535px * 0.6;
            height: 256px * 0.6;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            h2 {
                font-size: 86px * 0.6;
                color: #c81432;
            }
            p {
                margin-top: 60px * 0.6;
                font-size: 37px * 0.6;
                color: #000;
            }
        }
    }
}

.page3 {
    .content_l {
        & > div {
            width: 682px * 0.6;
            height: 256px * 0.6;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
        }
        h2 {
            font-size: 86px * 0.6;
            color: #c81432;
        }
        p {
            margin-top: 60px * 0.6;
            font-size: 37px * 0.6;
            color: #000;
        }
    }
    .content_r {
        .phone {
            width: 50%;
            right: 6%;
            position: absolute;
            top: 15%;
        }
        .person {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 80%;
        }
    }
}

.page4 {
    .content_l {
        & > div {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate3d(-50%, -50%, 0);
            .phone {
                width: 310px * 0.6;
            }
            .phone ~ img {
                position: absolute;
                left: 50%;
            }
            .huan1 {
                top: 0;
                margin-left: -119%;
                width: 236%;
            }
            .huan2 {
                top: 40%;
                margin-left: -95%;
                width: 190%;
            }
            .huan3 {
                bottom: -22%;
                margin-left: -110%;
                width: 220%;
                z-index: -1;
            }
            .dun {
                width: 60%;
                top: 30%;
                margin-left: -30%;
            }
        }
    }
    .content_r {
        & > div {
            text-align: right;

            width: 682px * 0.6;
            height: 256px * 0.6;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
        }
        h2 {
            font-size: 86px * 0.6;
            color: #c81432;
        }
        p {
            margin-top: 60px * 0.6;
            font-size: 37px * 0.6;
            color: #000;
        }
    }
}